<template>
    <div style="padding-bottom: 60px">
        <header class="base-header">
            <i class="link-icon" @tap='back'></i>
            <h1>管理收货地址</h1>
        </header>
        <div class="addressScroll">
          <mui-scroll-refresh v-if="data.isAddress" top='60px' bottom='75px' :autodown='autodow' >
            <div class="cartnone" v-if="!data.addressList.length>0">
                    <img src="../../public/images/noaddress.png" style="width:160px;" alt="" >
                    <p>&nbsp;尚无收货地址</p>
                </div>
            <article class="address-line" v-for='(index, address) in data.addressList'>
                <div class="address-box" @tap='backSettlement(address.id)' >
                    <div class="user-name">
                        <!--<i class="mui-icon icon-user"></i>-->
                        <img src="/public/images/userAddress.png">
                        {{address.receiverName}}&nbsp;{{address.receiverPhone}} <span v-if='address.isDefult'>默认</span>
                    </div>
                    <div class="address">
                        <!--<i class="mui-icon icon-user"></i>-->
                        <img src="/public/images/address.png">
                        &nbsp;{{ address.province + address.city + address.region + address.detailAddress}}
                    </div>
                </div>
                <div class="address-ctrl flex-justify">
                    <div class="mui-input-row mui-checkbox mui-left">
                        <label>{{address.isDefult ? '默认地址': '设为默认'}}</label>
                        <input name="checkbox1" type="checkbox" checked  @click.stop='setNotDefult(index)' v-if='address.isDefult' >
                        <input name="checkbox1" type="checkbox" v-if='!address.isDefult' @click.stop='setDefult(index)' >
                    </div>
                    <div class="ctrl-btn">
                        <span @tap="$router.go({name: 'addressEdit', params: {'id': address.id}})">编辑</span>
                        <span @tap='deleAddress(index)'>删除</span>
                    </div>
                </div>
            </article>
          </mui-scroll-refresh>
        </div>
        <footer style="z-index:111;background:#fff;height: 70px;">
          <div class="add-fixed-btn" @tap="$router.go({name: 'addAddress'});">
            添加新地址
          </div>
        </footer>
        
    </div>
</template>
<script>
  require('../../public/images/address.png');
  require('../../public/images/userAddress.png');
  import store from '../we-store';
  import scrollRefresh from '../../public/components/mui-scroll-refresh/mui-scroll-refresh.vue';
  export default {
    data: function () {    // 组件的数据格式
      console.log('1', store);
      return {
        data: store.state,
        autodow: true
      };
    },
    created: function () {
      // 运行 数据中转站的函数
      // store.getAddressList();
    },
    components: {
      'mui-scroll-refresh': scrollRefresh
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll(0, 0);
      this.checkedIsAddress();
    },
    watch: {
      $route: function (to) {
        store.state.pageNo = 1;
        store.state.addressList = [];
        console.log(store.state.scrolls.scroll);
        this.checkedIsAddress();
        // store.getAddressList();
      }
    },
    events: {
      pullRefreshReady: function (scroll) {
        store.setScroll(scroll);
        // store.getAddressList();
      },
      pulldown: function () {
        store.getAddressListUP();
      },
      pullup: function () {
        store.getAddressList();
      }
    },
    methods: {
      backSettlement: function (AddressId) {
        var id = this.$route.params.id;
        if (id !== 0 && id !== '0') {
          var data = JSON.parse(id);
          data['AddressId'] = AddressId;
          window.location.href = '/shoppingCart/index.html#!/settlement/' + JSON.stringify(data);
        }
      },
      setNotDefult: function (index) {
        store.setNotDefult(index);
      },
      setDefult: function (index) {
        store.setDefult(index);
      },
      deleAddress: function (index) {
        mui.confirm('是否删除该地址', '删除地址', ['否', '是'], function (e) {
          if (e.index === 1) {
            store.deleAddress(index);
            store.state.scrolls.scroll.scrollTo(0, 0);
          }
        }, 'div');
      },
      checkedIsAddress: function () {
        var str = location.href;
        if (str.indexOf('/address/') !== -1) {
          store.state.isAddress = true;
        } else {
          store.state.isAddress = false;
        }
      },
      back: function () {
        window.history.go(-1);
      }
    }
  };
</script>